import React, { Component } from 'react'
import styles from "../assets/styles/taba.module.css"
import styles2 from "../assets/styles/paging.module.css"
import Model from './Model'
export default class TabA extends Component {
  state = {
    tableData: [
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2023-01-13 17:39:42",
          "2023-02-13 17:39:42"
        ],
        _id: "63919f95024a7602dc78082a",
        title: "测试优惠券",
        receiveType: "2",
        price: 300,
        state: false,
        show: false,
        system_data: true,
        create_time: "2022-12-08T08:25:57.209Z",
        imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b18",
        title: "跨店满减",
        receiveType: "1",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b19",
        title: "新人券",
        receiveType: "2",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b20",
        title: "满100减20",
        receiveType: "3",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2022-01-15 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b21",
        title: "数码产品券",
        receiveType: "1",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2022-02-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b22",
        title: "跨店满减",
        receiveType: "2",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2022-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b23",
        title: "中秋现礼券",
        receiveType: "3",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      }
    ],
    searchType: "",
    searchData: "",
    elementState: true,
    currentPage: 1,
    pageSize: 3,
    addVisible: false,
    myTitle: "添加优惠券",
    form: {
      title: "默认名字",
      price: "",
      receiveType: "3",
      state: false,
      edu: ["zk"]
    },
    addVisible2: false,
    myTitle2: "修改优惠券",
    form2:{}
  }

  //filterData不是函数是一个属性，get获取这个属性
  get filterData() {
    const { tableData, searchType, searchData } = this.state
    return tableData.filter(item => {
      if (!searchType && !searchData) {
        return true
      } else {
        //对象的属性是一个变量的时候。用[]来获取数据
        if (item[searchType].indexOf(searchData) != -1) {
          return true
        }
      }
    })
  }
  get totalPage() {
    const { pageSize } = this.state
    const total = Math.ceil(this.filterData.length / pageSize)
    return total
  }
  get createSpanElement() {
    let temp = []
    for (let index = 0; index < this.totalPage; index++) {
      temp.push(<span data={index + 1} key={index}>{index + 1}</span>)
    }
    return temp
  }
  /**
   * 修改优惠券类型
   * @param {} value 
   * @returns 
   */
  changeReceiveType = (value) => {
    switch (value) {
      case "1": return "新人券";
      case "2": return "门槛券";
      case "3": return "满减券";
      default:
        return "通用券"
    }
  }
  changeTime = (array) => {
    const begin = array[0]
    const end = array[1]
    const beginTime = new Date(begin)
    const endTime = new Date(end)
    return (Math.abs(endTime - beginTime) / 1000 / 60 / 60 / 24) + "天"
  }
  /**
   * 保存搜索的条件
   * @param {} event 
   */
  searchTypeEvent = (event) => {
    const value = event.target.value;
    if (value == "title") {
      this.setState({
        searchType: value,
        elementState: true
      })
    } else if (value == "receiveType") {
      this.setState({
        searchType: value,
        elementState: false
      })
    }

  }
  /**
   * 保存搜索结果
   * @param {*} event 
   */
  textChangeEvent = (event) => {
    const value = event.target.value;
    this.setState({
      searchData: value
    })
  }

  searchDataSelectEvent = (event) => {
    const value = event.target.value
    this.setState({
      searchData: value
    })
  }

  deleteRow = (id) => {
    console.log(id);
    const { tableData } = this.state
    const index = tableData.findIndex(item => item._id == id)
    tableData.splice(index, 1)
    this.setState({
      tableData
    })
    // tableData.filter(item=>item._id != id)
  }

  /**
   * 点击分页按钮，获取结果
   */
  checkedPage = (event) => {
    console.log(event.target);
    const page = event.target.getAttribute("data")
    this.setState({
      currentPage: page
    })
  }

  /**
   * 子组件修改父组件title
   */
  changeTitleByChildren = (value) => {
    this.setState({
      myTitle: value
    })
  }

  addDataEvent = (bool) => {
    this.setState({
      addVisible: bool
    })
  }
  addDataEvent2 = (bool,item) => {
    console.log(item);
    this.setState({
      addVisible2: bool,
      form2:{...item}
    })
  }

  /**
   * 文本框受控组件，获取值
   * @param {} event 
   */

  commonFormElementEvent = (event) => {
    const element = event.target
    //获取节点的值
    const value = element.value
    //获取操作的节点name
    const attr = element.name
    const { form } = this.state
    form[attr] = value
    this.setState({
      form
    })
  }

  // changeInputEvent = (event) => {
  //   const value = event.target.value;
  //   const { form } = this.state
  //   form.title = value
  //   this.setState({
  //     form
  //   })
  // }
  // changePriceEvent = (event) => {
  //   const value = event.target.value;
  //   const { form } = this.state
  //   form.price = value
  //   this.setState({
  //     form
  //   })
  // }
  // changeSelectEvent = (event) => {
  //   const value = event.target.value
  //   const { form } = this.state
  //   form.receiveType = value
  //   this.setState({
  //     form
  //   })
  // }
  radioBtnEvent = (event) => {
    const value = event.target.value;
    const { form } = this.state
    form.state = JSON.parse(value)
    this.setState({
      form
    })

  }

  checkboxEvent = (event) => {
    const element = event.target;
    const value = element.value
    const { form } = this.state
    if (element.checked) {
      form.edu.push(value)
    } else {
      const index = form.edu.findIndex(item => item == value)
      form.edu.splice(index, 1)
    }
    this.setState({
      form
    })
  }

  addTask = () => {
    const {title,price,receiveType,state} = this.state.form
    const {tableData} = this.state
    const temp = {
      time: [
        "2021-01-13 17:39:42",
        "2023-01-13 17:39:42"
      ],
      useTime: [
        "2023-01-13 17:39:42",
        "2023-02-13 17:39:42"
      ],
      _id: "63919f95024a7602dc780812",
      title: "测试优惠券",
      receiveType: "2",
      price: 300,
      state: false,
      show: false,
      system_data: true,
      create_time: "2022-12-08T08:25:57.209Z",
      imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
    }
    const newObj = {...temp,title,price,receiveType,state}
    console.log(newObj);
    tableData.push(newObj)
    this.setState({
      tableData
    })

  }

  updateTask = ()=>{
    console.log(this.inputElement.value);
    console.log(this.selectElement.value);
    console.log(this.radioElement);
    if(this.radioElement.checked){
      console.log(this.radioElement.value);
    }else{
      console.log(this.radioElement2.value);
    }
    console.log(this.btnElement);
  }
  render() {
    const {
      user,
      tableData,
      elementState,
      currentPage,
      pageSize,
      addVisible,
      myTitle,
      form,
      addVisible2,
      myTitle2,
      form2
    } = this.state
    const beginIndex = (currentPage - 1) * pageSize
    const endIndex = beginIndex + pageSize

    return (
      <React.Fragment>
        <h3>user的值：{user}</h3>
        <div className={styles.box}>
          {/* 搜索 */}
          <div className={styles.search}>
            <div>
              <select name="" id="" onChange={this.searchTypeEvent}>
                <option value="">请选中搜索类型</option>
                <option value="title">名字搜索</option>
                <option value="receiveType">优惠券类型</option>
              </select>
            </div>
            {
              elementState
                ? <input onChange={this.textChangeEvent} type="text" placeholder='请输入搜索内容' />
                : <select name="" id="" onChange={this.searchDataSelectEvent}>
                  <option value="">请选中优惠券类型</option>
                  <option value="1">新人券</option>
                  <option value="2">门槛券</option>
                  <option value="3">满减券</option>
                </select>
            }
            <div>
              <button onClick={() => this.addDataEvent(true)}>添加</button>
            </div>
          </div>
          {/* 表格渲染 */}
          <div className={styles.mytable}>
            <table>
              <thead>
                <tr>
                  <th>编号</th>
                  <th>优惠券名称</th>
                  <th>优惠券图片</th>
                  <th>优惠券类型</th>
                  <th>面值</th>
                  <th>使用时间</th>
                  <th>是否开启</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {this.filterData.slice(beginIndex, endIndex).map(item => {
                  return (
                    <tr key={item._id}>
                      <td>{item._id}</td>
                      <td>{item.title}</td>
                      <td>
                        <img width="50px" src={item.imgSrc} alt="" />
                      </td>
                      <td>{this.changeReceiveType(item.receiveType)}</td>
                      <td>{item.price}</td>
                      <td>{this.changeTime(item.useTime)}</td>
                      <td>{item.state ? "开启" : "关闭"}</td>
                      <td>
                        <button onClick={() => this.deleteRow(item._id)}>删除</button>
                        <button onClick={() => this.addDataEvent2(true,item)}>修改</button>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>

          </div>
          <div className={styles2.fenye}>
            <div>当前{currentPage}页/共{this.totalPage}页</div>
            <div className={styles2.page} onClick={this.checkedPage}>
              {this.createSpanElement}
            </div>
          </div>
        </div>
        {/* 添加 */}
        <Model visible={addVisible} title={myTitle} closeModel={this.addDataEvent}>
          <div className='item'>
            <label htmlFor="">优惠券名字：</label>
            <input name='title' onChange={this.commonFormElementEvent} value={form.title} type="text" placeholder="请输入名字" />
          </div>
          <div className='item'>
            <label htmlFor="">优惠券价格：</label>
            <input name='price' onChange={this.commonFormElementEvent} value={form.price} type="text" placeholder="请输入名字" />
          </div>
          <div className='item'>
            <label htmlFor="">优惠券类型：</label>
            <select name="receiveType" onChange={this.commonFormElementEvent} value={form.receiveType}>
              <option value="1">通用券</option>
              <option value="2">商品券</option>
              <option value="3">新人券</option>
            </select>
          </div>
          <div className='item'>
            <span>状态：</span>
            <label htmlFor="">开启</label>
            <input name='state' type="radio" onChange={this.radioBtnEvent} checked={form.state == true} value={true} />
            <label htmlFor="">关闭</label>
            <input name='state' type="radio" onChange={this.radioBtnEvent} checked={form.state != true} value={false} />
          </div>
          {/* 自己先实现 */}
          <div className='item'>
            <span>学历：</span>
            <label htmlFor="">本科</label>
            <input type="checkbox" onChange={this.checkboxEvent} checked={form.edu.includes("bk")} value="bk" />
            <label htmlFor="">专科</label>
            <input type="checkbox" onChange={this.checkboxEvent} checked={form.edu.includes("zk")} value="zk" />
          </div>
          <div>
            <button onClick={this.addTask}>添加</button>
          </div>
        </Model>
        {/* 修改 */}
        <Model visible={addVisible2} title={myTitle2} closeModel={this.addDataEvent2}>
          <div className='item'>
            <label htmlFor="">优惠券名字：</label>
            <input name='title' ref={element=>this.inputElement = element} defaultValue={form2.title}  type="text" placeholder="请输入名字" />
          </div>
          <div className='item'>
            <label htmlFor="">优惠券类型：</label>
            <select name="receiveType" ref={element=>this.selectElement=element} defaultValue={form2.receiveType}>
              <option value="1">通用券</option>
              <option value="2">商品券</option>
              <option value="3">新人券</option>
            </select>
          </div>
          <div className='item'>
            <span>状态：</span>
            <label htmlFor="">开启</label>
            <input name='state' value={true} ref={element=>this.radioElement=element} defaultChecked={form2.state == true} type="radio" />
            <label htmlFor="">关闭</label>
            <input name='state' value={false} ref={element=>this.radioElement2=element} defaultChecked={form2.state != true} type="radio" />
          </div>
          {/* 自己先实现 */}
          <div className='item'>
            <span>学历：</span>
            <label htmlFor="">本科</label>
            <input type="checkbox" value="bk" />
            <label htmlFor="">专科</label>
            <input type="checkbox" value="zk" />
          </div>
          <div>
            <button ref={btn=>this.btnElement=btn} onClick={this.updateTask}>修改</button>
          </div>
        </Model>
      </React.Fragment>
    )
  }
}
